<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!--文档编码-->
    <meta charset="utf-8">
    <!--为了让IE以最新的标准和模式进行当前页面的渲染：为了让 IE 浏览器运行最新的渲染模式下-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--移动端的适配-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>首页</title>

    <!-- Bootstrap  引入当前bootstrap框架核心的样式文件 -->
    <link href="./lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    
    <!-- 引入字体图标库 -->
    <link rel="stylesheet" href="./lib/font-awesome/css/font-awesome.css">
    
    <!-- 引入base.css -->
    <link rel="stylesheet" href="css/base.css">


    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries 在IE8及以下不支持响应式，所以引入文件是为了兼容IE8及以下版本的显示-->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// Respond.js如果通过file://打开则不会有效果，需要通过http:// |  https:// 协议打开-->
    <!--[if lt IE 9]>
    <script src="./lib/html5shiv/html5shiv.min.js"></script>
    <script src="./lib/respond/respond.js"></script>
    <![endif]-->
    <link rel="stylesheet" href="./css/index.css"/>
</head>
<body>
<div class="box">
    <!-- 顶部固定部分 -->
    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container clearfix">
            <!-- 左侧logo图 -->
            <div class="top_left f_left">
                <a href="index.html">
                    <img src="images/logo.png">
                </a>
            </div>
            <!-- 右侧登录注册部分 -->
            <div class="top_right f_right">

                <a href="javascript:;" data-toggle="modal" data-target="#myModal1">注册</a>
                <a href="javascript:;" data-toggle="modal" data-target="#myModal2">登录</a>

                <!-- Modal注册 -->
                <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                  <div class="modal-dialog" role="document">
                    <div class="modal-content">
                      <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">注册店铺</h4>
                      </div>
                      <div class="modal-body">
                        <form action="">
                            <div class="smbox">
                                <label for="telphone">手机号&nbsp;:</label>
                                <input type="text" class="form-control" id="telphone" placeholder="请输入11位手机号"><span></span>
                            </div>
                            <div class="smbox">
                                <label for="idcode">验证码&nbsp;:</label>
                                <input type="text" class="form-control" id="idcode" placeholder="请输入6位数字">
                                <button type="button" class="btn btn-primary resend">发送验证码</button>
                                <span class="idcode_tip"></span>
                            </div>
                            <div class="smbox">
                                <label for="psd">密码&nbsp;:</label>
                                <input type="password" class="form-control" id="psd" placeholder="以字母开头，6~18位数字+字母"><span></span>
                            </div>
                            <div class="smbox">
                                <label for="repsd">确认密码&nbsp;:</label>
                                <input type="password" class="form-control" id="repsd" placeholder="请输入确认密码"><span></span>
                            </div>
                            <button type="submit" class="btn btn-danger btn-block submit">我要注册</button>
                            <!-- <a href="#" class="btn btn-danger btn-block submit">我要注册</a> -->
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox" value="">我已阅读并已同意<a href="contract.html">《饿了么网上订餐平台服务协议》</a>
                                </label>
                            </div>
                        </form>
                      </div>
                    </div>
                  </div>
                </div>

                <!-- Modal登录 -->
                <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                  <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="myModalLabel">登录店铺</h4>
                        </div>
                        <div class="modal-body">
                            <form action="">
                                <div class="smbox">
                                    <label for="telphone">手机号&nbsp;:</label>
                                    <input type="text" class="form-control" id="telphone" placeholder="请输入11位手机号"><span></span>
                                </div>
                                <div class="smbox">
                                    <label for="psd">密码&nbsp;:</label>
                                    <input type="password" class="form-control" id="psd" placeholder="请输入登录密码"><span></span>
                                </div>
                                <button type="submit" class="btn btn-danger btn-block submit">我要登录</button>
                            </form>
                        </div>
                    </div>
                  </div>
                </div>
            </div>
        </div>
    </nav>

    <!-- banner图部分 -->
    <div class="container-fluid banner">
        <img src="images/bgimg.jpg" alt="">  
    </div>

    <!-- 底部版权部分 -->
    <div class="container-fluid footer">  
        谷怪科技©2017 版权所有 豫ICP备17019613号-1  豫公网安备41019702002338号
    </div>

</div>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) bootstrap是基于iQuery，所以先引入jq-->
<script src="./lib/jquery/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed 是bootstrap核心的js文件-->
<script src="./lib/bootstrap/js/bootstrap.min.js"></script>

<script src="js/index.js"></script>
</body>
</html>